<template>
  <div  style="margin-left:250px;margin-right:350px;">
    <div style="background-image:linear-gradient(to right, #ff6701, #ff9501);height:130px;text-algin:center;padding:30px;color:color:#424040">
        <div style="font-size:30px;">{{major.name}}</div><br>
      <span style="font-size:20px;margin-right:200px">专业门类:{{major.parent}}</span>
         <span style="font-size:20px;">专业大类:{{major.category}}</span>
        <br>
    </div>
       <el-row style="margin-top:30px">
        <el-col :span="1"><div class="grid-content left-title "></div></el-col>
        <el-col :span="23"><div class="grid-content bg-purple-light">专业基本信息</div></el-col>
       </el-row>
<div class="box">
    <div class="element">
        <div class="content">
          <img class="icon" src="">
            <div class="text">
                <div style="font-size:19px;">{{major.type===1?"本科":"专科"}}</div>
                <div style="margin-top:15px">学历层次</div>
            </div>
        </div>
    </div>
    <div class="element">
        <div class="content">
          
            <img class="icon" src="">
            <div class="text">
                 <div style="font-size:19px;">{{convertNumberToText(major.studyPeriod)}}年</div>
                <div style="margin-top:15px">修业年限</div>
            </div>
        </div>
    </div>
    <div class="element" v-show="major.degree">
        <div class="content">
             <img class="icon" src="">
            <div class="text">
                <div style="font-size:19px;">{{major.degree}}</div>
                <div style="margin-top:15px">授予学位</div>
            </div>
        </div>
    </div>
    <div class="element">
        <div class="content">
             <img class="icon" src="">
            <div class="text">
                 <div style="font-size:19px;">{{major.genderRatio}}</div>
                <div style="margin-top:15px">男女比列</div>
            </div>
        </div>
    </div>   
</div>
<el-row style="margin-top:30px">
        <el-col :span="1"><div class="grid-content left-title "></div></el-col>
        <el-col :span="23"><div class="grid-content bg-purple-light">专业介绍</div></el-col>
       </el-row>
       <p style="line-height: 25px;color:#7b7b7b">{{major.description}}</p>
  <el-row style="margin-top:30px">
        <el-col :span="1"><div class="grid-content left-title "></div></el-col>
        <el-col :span="23"><div class="grid-content bg-purple-light">主修课程</div></el-col>
       </el-row>
       <p style="line-height: 25px;color:#7b7b7b">{{major.courses}}</p>
  <el-row style="margin-top:30px">
        <el-col :span="1"><div class="grid-content left-title "></div></el-col>
        <el-col :span="23"><div class="grid-content bg-purple-light">培养目标</div></el-col>
       </el-row>
       <p style="line-height: 25px;color:#7b7b7b">{{major.goals}}</p>
  <el-row style="margin-top:30px">
        <el-col :span="1"><div class="grid-content left-title "></div></el-col>
        <el-col :span="23"><div class="grid-content bg-purple-light">就业方向</div></el-col>
       </el-row>
       <p style="line-height: 25px;color:#7b7b7b">{{major.employment}}</p>
   <el-row style="margin-top:30px" v-show="major.postgraduate">
        <el-col :span="1"><div class="grid-content left-title "></div></el-col>
        <el-col :span="23"><div class="grid-content bg-purple-light">考研方向</div></el-col>
       </el-row>
       <p style="line-height: 25px;color:#7b7b7b">{{major.postgraduate}}</p>
  </div>
</template>

<script>
import{getMajorDetail}from '@/api/major'
export default {
 data() {
    return {
      major:''
    }
  },
  created(){
    //获取专业详情
    getMajorDetail(this.$route.query.id).then(res=>{
      if(res.data.code===1){
        this.major=res.data.data
      }
    })
  },methods:{
    convertNumberToText(num){
    var arr = ["零", "一", "二", "三", "四","五", "六","七", "八","九"]
    return arr[num]
    }
  }
}
</script>

<style scoped>
.left-title {
background: red;
width: 3px;
  }
  .bg-purple-light {
    padding: 3px;

    margin-left: -35px;
    font-size: 20px;


  }
  .grid-content {
    height: 30px;
  }
    .bg-purple {
    padding-top: 10px;
    height: 200px;
    line-height: 35px;
    font-size: 25px;
 
  }

  .box {
    display: flex;
    justify-content: flex-start;
    margin-top:30px;
}
.icon {
    width: 60px; /* 控制图标占据的宽度 */
}

.text {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.element {
    display: flex;
    width: 200px;

}

.content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

</style>